<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title th:utext="#{title.listprojects}">Req1 &middot; List Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap.css" th:href="@{/resources/css/bootstrap.css}" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap-responsive.css"
	th:href="@{/resources/css/bootstrap-responsive.css}" />

<link rel="stylesheet" type="text/css" media="all"
	href="css/DT_bootstrap.css"
	th:href="@{/resources/css/DT_bootstrap.css}" />
	


</head>

<body>

	<div th:substituteby="fragments/userheader :: navbar"> </div>

	<div class="container-fluid">

		<div class="row-fluid">
			<div class="span6">
				<ul class="breadcrumb">
					<li><a href="home">Home</a> <span class="divider">/</span></li>

					<li class="active">List Projects</li>
				</ul>
			</div>
			<div class="span6">
				<div class="btn-group pull-right">
					<a class="btn btn-primary" href="newproject">New Project</a> 
					
				</div>
			</div>
		</div>




		<div class="row-fluid">

			
			<div class="span12">
				
				

				<table 
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th style="with: 5%">Sl#</th>
							<th>Name</th>
							<th>Created</th>
							<th>Updated</th>
							<th>Manager</th>
							
						</tr>
					</thead>
					<tbody>
						<tr style="with: 5%" th:each="p , row: ${projects}"
							th:with="c=${p.createdDate.toDate()}, l=${p.lastUpdatedDate.toDate()}">
							<td  style="width: 5%"><a href="details.html"
								th:href="@{/editproject(project=${p.id})}"
								th:text="${row.count}">1</a>
							</td>
							<td>
								<a href="details.html"
								th:href="@{/editproject(project=${p.id})}"
								th:text="${p.name}">1</a>
							</td>
							<td  >
							
								<a href="details.html"
								th:href="@{/editproject(project=${p.id})}"
								th:text="${beans.pretty.format(c)}">1</a>
							
							</td>
							<td  >
								<a href="details.html"
								th:href="@{/editproject(project=${p.id})}"
								th:text="${beans.pretty.format(l)}">1</a>
							
							</td>
							<td  >
							
								<a href="details.html"
								th:href="@{/editproject(project=${p.id})}"
								th:text="${p.createdBy.name}">1</a>
							
							</td>
						</tr>
					</tbody>
				</table>


			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<hr />



	</div>
	<!--/.fluid-container-->

	<div th:substituteby="fragments/userheader :: footer"> </div>

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js" th:src="@{/resources/js/jquery.js}"></script>
	<script src="js/jquery.dataTables.js"
		th:src="@{/resources/js/jquery.dataTables.js}"></script>
		
	<script src="js/bootstrap-dropdown.js"
		th:src="@{/resources/js/bootstrap-dropdown.js}"></script>
	
	

	<script src="js/DT_bootstrap.js"
		th:src="@{/resources/js/DT_bootstrap.js}"></script>

</body>
</html>
